<template>
  <div class="qn-video-item" @click="selectVideo" :class="{'select': videoChoose && bindClick}">
    <div v-if="videoSrc === ''" class="no-video">
      暂未播放视频
    </div>
    <video-player
      v-else
      :class="videoScale?'video-scale':'video-no-scale'"
      :options="playerOptions"
      :playsinline="true"
      :id="'playerIndex'+playerIndex"
      @play="startPlay($event)"
      @playing="onPlayerPlaying($event)"
      @timeupdate="onPlayerTimeupdate($event)"
      @ready="changePlayerBtn">
    </video-player>
    <!-- @loadeddata="onPlayerLoadeddata($event)"
      @play="onPlayerPlay($event)"
      @waiting="onPlayerWaiting($event)"
      @playing="onPlayerPlaying($event)"
      @timeupdate="onPlayerTimeupdate($event)"
      @canplay="onPlayerCanplay($event)"
      @canplaythrough="onPlayerCanplaythrough($event)" 
      @statechanged="playerStateChanged($event)" -->
  </div>
</template>
<script>
// var mainContentHeight = document.body.offsetHeight
import videojs from 'video.js'
import videoPlayer from './play'
import 'videojs-flash'
import SWF_URL from 'videojs-swf/dist/video-js.swf'
// videojs.options.flash.swf = null

export default {
  props: {
    bindClick: {
      type: [Boolean],
      default: false
    },
    tabActive12_2: {
      type: [Boolean],
      default: false
    },
    playerIndex: {
      type: [Number],
      default: 0
    }
  },
  components: {
    videoPlayer
  },
  data() {
    return {
      playerOptions: {
        live: true,
        autoplay: true,
        muted: true,
        fluid: true, // 自适应容器大小
        notSupportedMessage: '此视频暂无法播放，请稍后再试',
        controls: false,
        controlBar: {
          timeDivider: false,
          durationDisplay: false,
          remainingTimeDisplay: false,
          fullscreenToggle: false, // 全屏按钮
          currentTimeDisplay: false,
          playToggle: false,
          progressControl: false,
          playbackRateMenuButton: true
        },
        techOrder: ['flash'], // 兼容顺序
        flash: {
          hls: {
            withCredentials: false
          },
          swf: SWF_URL
        },
        sources: [{
          type: 'rtmp/flv',
          src: ''
        }]
      },
      videoSrc: '',
      videoChoose: false,
      videoTitle: '',
      videoId: '',
      playerWidth: '',
      playerHeight: '',
      videoScale: false,
      isZhengChang: false,
      isPlay: false
    }
  },
  // watch: {
  //   bindClick(val) {
  //     this.$nextTick(() => {
  //       if (val) {
  //         this.playerOptions.controls = false
  //         this.playerOptions.muted = true
  //       } else {
  //         this.playerOptions.controls = true
  //         this.playerOptions.muted = false
  //       }
  //     })
  //   }
  // },
  mounted() {
  //  console.log(window.innerHeight)
  },
  methods: {
    startPlay(e) {
      this.isPlay = false
      this.isZhengChang = false
      this.videoScale = false
      // this.responseVideoHW()
      this.getHW()
    },
    onPlayerPlaying(e) {
      if (!this.isPlay) this.isPlay = true
      if (!this.videoScale) this.videoScale = true
    },
    onPlayerTimeupdate(e) {
      if (!this.isPlay) return
      if (this.isZhengChang) return
      // this.getHW()
    },
    // responseVideoHW() {
    //   // $('.vjs-fluid').css('padding-top', '81.82%')
    //   var $currentPlayer = $(`#playerIndex${this.playerIndex}`)
    //   var playerW = $currentPlayer.width()
    //   var playerH = $currentPlayer.height()
    //   if(!playerW) return
    //   // console.log( '播放器宽高分别为: ', playerW, playerH)
    //   var flashW = $(`#playerIndex${this.playerIndex} .video-js`).width()
    //   var flashH = $(`#playerIndex${this.playerIndex} .video-js`).innerHeight()
    //   var _id = $currentPlayer.find('.vjs-fluid').attr('id')
    //   var $videos = null
    //   if( $('.' + _id +'-dimensions') ){
    //     $videos = $('.' + _id +'-dimensions')
    //   } else if( $('.dimensions-' + _id) ){
    //     $videos = $('.dimensions-' + _id)
    //   }
    //   // console.log($videos.css('width'))
    //   var _ptHeight = $('.' + _id +'-dimensions.vjs-fluid').css('padding-top') // flash的高度
    //   // console.log(_ptHeight)
    //   var paramH = _ptHeight.substr(0,_ptHeight.length-2) // 删除后两位的 px， 得出高度的数值
    //   var percent = ((+paramH / flashW) * 100 ).toFixed(2) + '%' //得出百分比
    //   // console.log(paramH, playerH)
    //   // if(1){
    //   //   if(paramH > playerH){
    //   //     console.log('高度超出')
    //   //     var scaleY = playerH / paramH
    //   //     var top = (paramH - playerH) / 2
    //   //     $('.vjs-fluid').css({'transform':`scaleY(${scaleY})`, 'top': `-${top}px`})
    //   //     var mt = playerH / 2 - 35
    //   //     $(`#playerIndex${this.playerIndex} button`).css({'top': `${mt}px!important`, 'margin-top:': '0!important'})
    //   //   } else {
    //   //     console.log('高度不够')
    //   //     var scaleY = playerH / paramH
    //   //     var top = (paramH - playerH) / 2
    //   //     $('.vjs-fluid').css({'transform':`scaleY(${scaleY})`, 'top': `-${top}px`})
    //   //     var mt = (playerH - 70) / 2 
    //   //     $('.vjs-custom-skin > .video-js .vjs-big-play-button').css({'top': `${mt}px!important`, 'margin-top:': '0!important'})
    //   //     // $(`#playerIndex${this.playerIndex} button`).css({'top': `${mt}px!important`, 'margin-top:': '0!important'})
    //   //   }
    //   // }
    //   // console.log( flashW, playerW, playerH, paramH,  percent)
    // },
    getHW() {
       if(this.tabActive12_2 == true) {
          this.playerWidth = $('.video-item12_2').width()
          this.playerHeight = $('.video-item12_2').height()
          this.rotate2()
      }else{
        this.playerWidth = $('.video-item').width()
        this.playerHeight = $('.video-item').height()
        this.rotate()
      }
    },
    rotate() {
      let h = $(`#playerIndex${this.playerIndex} .video-js`).innerHeight()
      let seita = this.playerHeight / h
      let deg = parseFloat((Math.acos(seita) * 180 / (Math.PI)).toFixed(2))
      let top = (this.playerHeight - h) / 2
      $(`#playerIndex${this.playerIndex} .video-js`).css('transform', `rotateX(${deg}deg)`)
      $(`#playerIndex${this.playerIndex} .video-js`).css('top', `${top}px`)
      // 判断获取的高度h是不是视频正常加载完的高度
      let paddingTop = this.playerWidth * 0.8181818181818183
      if (paddingTop - h > 10) {
      } else {
        this.isZhengChang = true
      }
    },
    rotate2() {
      if(window.innerHeight>1200){
        $(`#playerIndex${this.playerIndex} .video-js`).css('transform', `scaleY(2.4)`)   
      }else if(window.innerHeight >= 1100 && window.innerHeight <= 1200) {
        $(`#playerIndex${this.playerIndex} .video-js`).css('transform', `scaleY(2.25)`)
      }else if(window.innerHeight > 1080 && window.innerHeight < 1100) {
        $(`#playerIndex${this.playerIndex} .video-js`).css('transform', `scaleY(2.15)`)
      }else if(window.innerHeight >= 1050 && window.innerHeight <= 1080) {
        $(`#playerIndex${this.playerIndex} .video-js`).css('transform', `scaleY(2.1)`)
      }else if(window.innerHeight >= 1000 && window.innerHeight < 1050) {
        $(`#playerIndex${this.playerIndex} .video-js`).css('transform', `scaleY(2.05)`) 
      } else if(window.innerHeight >= 950 && window.innerHeight < 1000) {
         $(`#playerIndex${this.playerIndex} .video-js`).css('transform', `scaleY(1.9)`) 
      }  else if(window.innerHeight >= 850 && window.innerHeight < 900) {
         $(`#playerIndex${this.playerIndex} .video-js`).css('transform', `scaleY(1.8)`) 
      }else if(window.innerHeight >= 750 && window.innerHeight < 800) {
        $(`#playerIndex${this.playerIndex} .video-js`).css('transform', `scaleY(1.7)`) 
      }else if(window.innerHeight >= 725 && window.innerHeight < 750){
       $(`#playerIndex${this.playerIndex} .video-js`).css('transform', `scaleY(1.6)`) 
      }else if(window.innerHeight >= 700 && window.innerHeight < 725){
        $(`#playerIndex${this.playerIndex} .video-js`).css('transform', `scaleY(1.5)`) 
      } else if(window.innerHeight >= 650 && window.innerHeight < 700){
        $(`#playerIndex${this.playerIndex} .video-js`).css('transform', `scaleY(1.4)`) 
      }else if(window.innerHeight >= 625 && window.innerHeight < 650) {
        $(`#playerIndex${this.playerIndex} .video-js`).css('transform', `scaleY(1.3)`)   
      } else if(window.innerHeight > 600 && window.innerHeight < 625) {
        $(`#playerIndex${this.playerIndex} .video-js`).css('transform', `scaleY(1.2)`)
      }else if(window.innerHeight <= 600) {
        $(`#playerIndex${this.playerIndex} .video-js`).css('transform', `rotateX(0deg)`)  
      }
      $(`#playerIndex${this.playerIndex} .video-js`).css('top', `0px`)
      // 判断获取的高度h是不是视频正常加载完的高度
      let paddingTop = this.playerWidth * 0.8181818181818183
      if (paddingTop - h > 10) {
      } else {
        this.isZhengChang = true
      }
    },
    // ----------------
    selectVideo() {
      if (this.bindClick) {
        this.videoChoose = !this.videoChoose
        this.$emit('select', this.videoChoose)
      }
    },
    setChoose(val) {
      this.videoChoose = val
    },
    changePlayerBtn(player) {
      // this.addCloseBtn(player)
      // this.addShotBtn(player)
      // this.addVideoTitle(player)
    },
    addCloseBtn(player) {
      const _this = this
      const closeBtn = player.controlBar.addChild('button')
      closeBtn.addClass('el-icon-close')
      closeBtn.addClass('vjs-control')
      closeBtn.addClass('vjs-button')
      closeBtn.addClass('vjs-close-control')
      closeBtn.on('click', () => {
        _this.$emit('closeVideo')
      })
    },
    addShotBtn(player) {
      const _this = this
      const shotBtn = player.controlBar.addChild('button')
      shotBtn.addClass('iconfont')
      shotBtn.addClass('icon-shot')
      shotBtn.addClass('vjs-control')
      shotBtn.addClass('vjs-button')
      shotBtn.addClass('vjs-shot-control')
      shotBtn.on('click', () => {
        _this.$emit('shotVideo', player.currentTime())
      })
    },
    addVideoTitle(player) {
      const _this = this
      const titleDiv = player.controlBar.addChild('button')
      titleDiv.addClass('vjs-video-title')
      videojs.dom.appendContent(titleDiv.el_, _this.videoTitle)
    }
  }
}
</script>

<style lang="scss">
  .qn-video-item {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    &.select {
      border: 2px solid $color-danger;
    }
    .video-player {
      width: 100%;
      height: 100%;
      position: relative;
    }
    .video-js {
      height: 100%;
      outline: none !important;
      position: absolute;
      &.vjs-playing .vjs-tech {
        pointer-events: none;
      }
      .vjs-big-play-button {
        // 播放按钮换成圆形
        height: 2em;
        width: 2em;
        line-height: 2em;
        border-radius: 1em;
        margin-top: -1em;
        margin-left: -1em;
      }
      .vjs-control:focus {
        outline: none !important;
      }
      .vjs-control-bar {
        // .vjs-button > .vjs-icon-placeholder:before {
        //   line-height: 1;
        //   font-size: 22px;
        // }
        .vjs-volume-panel {
          .vjs-volume-control {
            display: none;
          }
        }
        .vjs-live-control {
          .vjs-live-display {
            display: none;
          }
        }
        .vjs-fullscreen-control {
          margin-right: 25px;
          margin-top: 2px;
        }
        // .vjs-volume-panel {
        //   position: absolute;
        //   right: 62px;
        //   top: 2px;
        //   .vjs-volume-bar {
        //     margin: 0.7em 0.45em;
        //   }
        // }
        .vjs-close-control {
          position: absolute;
          right: 0;
          font-weight: bold;
          font-size: 20px;
          width: 42px;
          cursor: pointer;
        }
        .vjs-shot-control {
          position: absolute;
          right: 53px;
          top: -1px;
          font-size: 20px;
          width: 42px;
          cursor: pointer;
        }
        .vjs-video-title {
          position: absolute;
          left: 5px;
          width: calc(100% - 210px);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          word-break: break-all;
          text-align: left;
        }
      }
      .vjs-error-display {
        background: #000;
        &:before {
          content: ''
        }
        .vjs-modal-dialog-content {
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
    .no-video {
      background: #000;
      color: #fff;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .vjs-fluid {
      padding-top: 81.81818%!important;
    }
    .video-no-scale{
      .video-js{
        transform: none!important;
        top: 0!important;
      }
    }
  }
</style>
